<!doctype html>
<style>
    td {
        width: 50px;
        height: 50px;
        padding: 0px;
        background: lime;
        box-sizing: border-box;
    }
    td div {
      display: inline-block;
      width: 22px;
      height: 5px;
      background: orange;
    }
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script type="text/javascript">
    runAfterLayoutAndPaint(() => theRow.removeChild(cellToRemove), true);
</script>
<p>Removing the left cell with a big border should give the remaining cells enough space to put the orange inline-blocks on the same line.</p>
<table style="border-collapse:collapse">
  <tr id="theRow">
    <td><div></div> <div></div></td>
    <td style="border:18px solid red" id="cellToRemove"></td>
    <td><div></div> <div></div></td>
  </tr>
</table>
